<template>
  <div id="changedialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="dialogTitle"
      @closetextDialog="closetextDialog"
      @confirmbtn="confirmbtn"

    >
      <div class="innerLoding">
        <el-row>
          <el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            size="small"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="封面图:" prop="img_url">
                  <uploadimg
                    :imgModel="formData"
                    @deleteimg="picturedel"
                    class="uploaditem"
                    @uploadimgok="pictureok"
                    :multipleopen='multipleopen'
                    :imgList='formData.img_url'
                        :filedata='filedata'
                  >
                    <span slot="text">上传的图片大小不得超过10M</span>
                  </uploadimg>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="分类:" prop="type">
                  <el-select
                    v-model="formData.type"
                    placeholder="请选择分类"
                    style="width: 100%"
                  >
                    <el-option
                      :label="item.title"
                      :value="item.id"
                      v-for="(item, index) in category"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="内容:" prop="content">
                  <div class="small">
                      <svg-icon icon-class="bq" style="font-size: 24px;cursor:pointer" @click="changePicker"/>

                  </div>
                  <el-input
                    type="textarea"
                    v-model="formData.content"
                    :rows="10"
                    resize="none"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="" prop="">
                    <VEmojiPicker @select="selectEmoji" v-if="showPicker" style="width:100%"/>
                </el-form-item>
              </el-col>
            </el-row>
                              
          
          </el-form>
        </el-row>
      </div>
    </commonformdialog>
  </div>
</template>

<script type="text/javascript">
//引入弹窗
import commonformdialog from "@/components/commondialog/commondialog";
import uploadimg from "@/components/uploadimg/uploadimg";
import { VEmojiPicker } from "v-emoji-picker";
import {
discoverCreate,

discoverUpdate
} from "@/api/found";
export default {
  data() {
    return {
          filedata:{category:'information'},
      showPicker: false,
      multipleopen:true,
      imgList:[],
      formData: {
        type:null,
        img_url:[],
        content:'',
      },
      rules: {
        type: [{ required: true, message: "请选择分类", trigger: "blur" }],
        img_url: [
          { required: true, message: "请上传图片", trigger: "blur" },
        ],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
      
      },
      statusOptions: [
        { lable: "未处理" },
        { lable: "已完成同步" },
        { lable: "图片有水印" },
        { lable: "图片不存在" },
        { lable: "图片不匹配" },
        { lable: "其他" },
      ],
  
    };
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },
  category:{
 type: Array,
  },
  dialogdata:{
       type: Object,
    }
  },
  components: {
    commonformdialog,
    uploadimg,
    VEmojiPicker,
  },
  methods: {
    changePicker(){
      this.showPicker=!this.showPicker
    },
    closetextDialog() {
      this.$emit("closedialog");
    },
    //删除图片
    picturedel(index) {
      this.formData.img_url.splice(index,1);
    },
    //上传图片成功
    pictureok(val) {

      if(this.multipleopen){
          this.formData.img_url.push(val.url);
      }
    
    },
    confirmbtn() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) return;
        let params = this.formData;
        params.img_url= params.img_url.join(',')
        let data;
        if (this.formType == 0) {
          data = await discoverCreate(params);
        } else {
          data = await discoverUpdate(params);
        }
        if (data.code == "0000") {
          this.$message({
            type: "success",
            message: data.msg,
          });
          this.$emit("confirm");
        }
      });
    },
   
    selectEmoji(emoji) {
      this.formData.content+=emoji.data
    },
  },
  watch: {
    isshowDialog: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
      }
    },
     dialogdata:function(val){
    this.formData=val
  }
  },
  created() {

  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  #InputSearch {
    display: none !important;
  }
  .grid-emojis{
    grid-template-columns: repeat(10, 10%)!important;
  }
  .small {
    position: absolute;
    z-index: 9;
    left: -45px;
    top:30px
  }
}

</style>
